<template>
  <div class="content">
    <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="该地区没有独卫房源"
      slot="houseItem"
      v-if="independentWcList.length == 0"
    />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-else>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div>
          <house-item
            @todetail="todetail(item.id)"
            slot="houseItem"
            v-for="item of independentWcList"
            :houseItem="item"
            :key="item.id"
            :imgPath="staticpath+item.images[0].path"
          />
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import HouseItem from "components/common/houseitem/HouseItem";

import { mapState } from "vuex";

import { getSynthsizeHouseList } from "network/areasearch";

export default {
  name: "",
  components: {
    HouseItem,
  },
  data() {
    return {
      independentWcList: [],
      staticpath: localStorage.getItem("staticpath"),
      loading: false,
      finished: false,
      refreshing: false,
      pageNum: 0,
      pageSize: 8,
      size: 0,
    };
  },
  methods: {
    todetail(houseId) {
      this.$router.push({
        path: "/housedetail",
        query: {
          houseId,
        },
      });
    },
    onLoad() {
      this.toGetSynthsizeHouseList();
    },
    onRefresh() {
      this.pageNum =  1;
      let pageNum = this.pageNum;
      let pageSize = this.pageSize;
      let city = this.city;
      let villageName = this.villageSearch;
      let code = 2;
      this.finished = false;
      getSynthsizeHouseList({
        city,
        villageName,
        code,
        pageNum,
        pageSize,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.independentWcList = res.data.list;
          setTimeout(() => {
            this.$toast({
              message: "刷新成功",
              position: "bottom",
            });
            this.refreshing = false;
          }, 500);
        } else {
          this.$toast({
            message: "刷新失败",
            position: "bottom",
          });
          this.refreshing = false;
        }
      });
    },
    toGetSynthsizeHouseList() {
      this.pageNum = this.pageNum + 1;
      let pageNum = this.pageNum;
      let pageSize = this.pageSize;
      let city = this.city;
      let villageName = this.villageSearch;
      let code = 2;
      getSynthsizeHouseList({
        city,
        villageName,
        code,
        pageNum,
        pageSize,
      }).then((res) => {
        console.log(res);
        this.size++;
        this.independentWcList.push(...res.data.list);
        this.loading = false;
        if (this.size >= res.data.lastPage) {
          this.finished = true;
        }
      });
    },
  },
  created() {
    this.toGetSynthsizeHouseList();
  },
  computed: {
    ...mapState({
      villageSearch: (state) => state.moduleHotCity.villageSearch,
      city: (state) => state.moduleHotCity.city,
    }),
  },
  
};
</script>

<style scoped>
</style>